<template>
  <div id="show">
    <!-- 1.轮播图 -->
    <div class="banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index) in [1,2,3,4]" v-bind:key="index">
          <img v-bind:src="showData.bannerImg+item+'.jpg'" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <!-- 2.商品名称 -->
    <div class="content" v-if="isShowData">
      <div>{{showInfo.Name}}</div>
      <div class="promotion-activity">
        <div class="promotion-a">折</div>
      </div>
    </div>
    <!-- 3.商品介绍 -->
    <div class="am-u-sm-12 clplr bgw mt4">
      <div class="cake-info-datum">
        <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-a">
          <div class="cake-info-left qfc">甜度</div>
          <div class="cake-info-right hfc">
            <img
              v-if="isShowData"
              style="vertical-align: top; width: 22.4vw; margin-top: 0.6vw;"
              :src="'https://res.bestcake.com/m-images/ww/jz/tiandu_'+(showTypes[0].Sweet||showTypes[0].CakeType[0].Sweet)+'.png'"
            />
            <!-- showTypes[0].CakeType[0].Sweet -->
          </div>
        </div>
        <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-b">
          <div class="cake-info-left qfc">口味</div>
          <div class="cake-info-right hfc ng-binding">{{showInfo.CategoryName}}</div>
        </div>
        <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-c">
          <div class="cake-info-left qfc">原材料</div>
          <div class="cake-info-right hfc ng-binding">{{showInfo.Resourse||showInfo.Resource}}</div>
        </div>
        <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-d">
          <div class="cake-info-left qfc">适合人群</div>
          <div class="cake-info-right hfc ng-binding">所有人群</div>
        </div>
        <div class="am-u-sm-12 clplr cake-info-datum-list cake-info-datum-e">
          <div class="cake-info-left qfc">保鲜条件</div>
          <div class="cake-info-right hfc ng-binding">{{showInfo.KeepFresh}}</div>
        </div>
      </div>
    </div>
    <!-- 4.商品评价 -->
    <div class="am-u-sm-12 clplr bgw mt4 p4" ng-click="gopj()">
      <div class="am-u-sm-6 clplr evaluate-a" align="left">
        <div class="left">
          <img
            src="https://res.bestcake.com/m-images/ww/detail/evaluate-a.png"
            class="am-img-responsive"
          />
        </div>
        <div class="right">商品评价</div>
      </div>
      <div class="am-u-sm-6 clplr evaluate-b" align="right">
        <div class="right">
          <img
            src="https://res.bestcake.com/m-images/ww/detail/evaluate-b.png"
            class="am-img-responsive"
          />
        </div>
        <div class="left qfc ng-binding">(7469条)</div>
      </div>
    </div>
    <!-- 5.商品磅数 -->
    <div class="bang mt4">
      <div class="cake-size-a">
        <button
          @click="selSize(item,index);sel(index)"
          v-for="(item,index) in showTypes"
          :class="{'li-selected':nlist==index,'li-select':true}"
          :key="index"
        >{{item.Size}}</button>
      </div>
    </div>
    <!-- 6商品购买数量 -->
    <div class="num mt4 p4">
      <span>购买数量</span>
      <div>
        <img
          @click="reduce(num)"
          :src="'https://res.bestcake.com/m-images/ww/detail/reduce-'+(num>1?1:0)+'.png'"
        />
        <span>{{num}}</span>
        <img @click="num++" src="https://res.bestcake.com/m-images/ww/detail/add.png" />
      </div>
    </div>
    <!-- 底部注释 -->
    <div class="jg-gonggao">
      <div class="jg-gonggao1">
        <div class="jg-text-z">划线价格</div>
        <div class="jg-text-y">商品的专柜价、吊牌价、正品零售价、厂商指导价或该商品的曾经展示过的销售价等，并非原价，仅供参考。</div>
      </div>
      <div class="jg-gonggao1">
        <div class="jg-text-z">未划线价格</div>
        <div class="jg-text-y">商品的实时标价，不因表述的差异改变性质。具体成交价格根据商品参加活动，或会员使用优惠券、积分等发生变化，最终以订单结算页价格为准。</div>
      </div>
    </div>
    <!-- 底部界面 -->
    <div
      class="am-u-sm-12 clplr bgw"
      style="position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; height: 14.6666vw;"
    >
      <div class="purchase-c">
        <div class="purchase-c-1 ng-binding">{{num*showSize.CurrentPrice}}.00</div>
        <div class="purchase-c-2">
          <div class="purchase-c-2-left">已优惠：</div>
          <div class="purchase-c-2-right ng-binding">0.00</div>
        </div>
      </div>
      <div class="purchase-a">
        <div class="purchase-1">立即购买</div>
      </div>
      <div v-on:click="addCart" class="purchase-b" style="color: rgb(0, 0, 0);">
        <div class="purchase-2">加入购物车</div>
      </div>
    </div>
  </div>
</template>
<script>
import { MessageBox } from "mint-ui";
import axios from "axios";
export default {
  data() {
    return {
      nlist: 0,
      num: 1,
      sizeNum: 0,
      showData: {}, //轮播图片
      routeData: {}, //路由传到详情页的数据
      initData: "",
      showInfo: {}, //详情页基本数据
      showTypes: [], //详情页规格
      isShowData: false,
      showSize: {}
    };
  },
  created() {
    // console.log(this.$router)
    this.routeData = this.$route.query;
    // console.log(this.$route.query);
    this.pageInit();
  },
  methods: {
    pageInit() {
      //banner图片设置
      this.showData.bannerImg = this.setImg(this.routeData.SupplyNo);
      // console.log(this.showData);
    },
    //https://res.bestcake.com/m-images/   共同部分
    //xx-detail/Name/Name-  1~4.jpg
    setImg(No) {
      let path = "https://res.bestcake.com/m-images";
      if (No.indexOf("KSK") != -1) {
        let data = {
          City: this.routeData.City,
          ProName: this.routeData.Name,
          c: "Product",
          m: "GetCakeByName",
          v: new Date().getTime()
        };
        this._getShowData(data, res => {
          // console.log(res.data.Tag);
          this.initData = res;
        });
        return (
          path + `/jd-detail/${this.routeData.Name}/${this.routeData.Name}-`
        );
      } else if (No.indexOf("NS") != -1) {
        let data = {
          Name: this.routeData.Name,
          c: "NsCakeCenter",
          m: "GetNSCakeByName",
          v: new Date().getTime()
        };
        this._getShowData(data, res => {
          // console.log(res.data.Tag);
          this.initData = res;
        });
        return (
          path + `/ns-detail/${this.routeData.Name}/${this.routeData.Name}-`
        );
      } else if (No.indexOf("JZ") != -1) {
        let data = {
          City: this.routeData.City,
          ProName: this.routeData.Name,
          c: "IndexCenter",
          m: "GetjzCakeInfo",
          v: new Date().getTime()
        };
        this._getShowData(data, res => {
          // console.log(res.data.Tag);
          this.initData = res;
        });
        return (
          path + `/jz-detail/${this.routeData.Name}/${this.routeData.Name}-`
        );
      } else if (No.indexOf("RP") != -1) {
        let data = {
          Name: this.routeData.Name,
          c: "NsCakeCenter",
          m: "GetRuPCakeByName",
          v: new Date().getTime()
        };
        this._getShowData(data, res => {
          // console.log(res.data.Tag);
          this.initData = res;
        });
        return (
          path + `/rp-detail/${this.routeData.Name}/${this.routeData.Name}-`
        );
      } else if (No.indexOf("ns") != -1) {
        let data = {
          Name: this.routeData.Name,
          c: "NsCakeCenter",
          m: "GetNSCakeByName",
          v: new Date().getTime()
        };
        this._getShowData(data, res => {
          // console.log(res.data.Tag);
          this.initData = res;
        });
        return (
          path + `/ns-detail/${this.routeData.Name}/${this.routeData.Name}-`
        );
      } else if (No.indexOf("ns") == -1) {
        let data = {
          City: this.routeData.City,
          ProName: this.routeData.Name,
          c: "Product",
          m: "GetCakeByName",
          v: new Date().getTime()
        };
        this._getShowData(data, res => {
          // console.log(res.data.Tag);
          this.initData = res;
        });
        return (
          path + `/jd-detail/${this.routeData.Name}/${this.routeData.Name}-`
        );
      }
      console.log(this.showTypes);
    },

    //商品磅数选择
    selSize(item, num) {
      this.showSize = item;
      this.sizeNum = num;
      console.log(this.showSize);
    },

    //加入购物车
    addCart() {
      //       console.log(this.num)
      // console.log(this.sizeNum)
      // console.log(this.showTypes[this.sizeNum]);
      let temp = {
        City: this.$store.state.city,
        SupplyNo: this.$route.query.SupplyNo,
        Name: this.showInfo.Name,
        id: this.showTypes[this.sizeNum].Id, //size  ID
        currentPrice: this.showTypes[this.sizeNum].CurrentPrice,
        Size: this.showTypes[this.sizeNum].Size,
        num: this.num,
        mark:"show"
      };
      this.$store.commit("add", temp);

MessageBox.confirm('', {
    message: '&nbsp&nbsp',
    title: '成功添加到购物车',
    showConfirmButton:true,
    showCancelButton:true,
    cancelButtonClass:'cancelButton',
    confirmButtonClass:'confirmButton',
    confirmButtonText:'去结算',
    cancelButtonText:'再看看'
}).then(action => {
    if (action == 'confirm') {//点击确定的回调
    this.$router.push("/cart");
    }
}).catch(err => {
    if (err == 'cancel') {//点击暂不的回调
    console.log('再看看');
    }
});

      // MessageBox.confirm('&nbsp','成功添加到购物车').then(action => {
      //   this.$router.push("/cart");
      // });
    },

    //磅数选择tab效果
    sel(index) {
      this.nlist = index;
    },

    _getShowData(data, callback) {
      this.$apis.getShowData(data).then(res => {
        // 取到所有的数据   数据类型有两种  ksk {}    ns []
        callback(res.data.Tag);
      });
    },

    reduce(num) {
      if (num > 1) {
        this.num = num - 1;
      } else {
        this.num = 1;
      }
    }
  },
  watch: {
    initData() {
      //设置变量    目的:显示详情页数据
      //this.showInfo其它数据
      //this.showTypes规格
      if (this.initData.length) {
        //数组情况
        this.initData.map(item => {
          if (this.routeData.City == item.City) {
            this.showTypes.push(item);
          }
        });
        // console.log(this.showTypes)
        if (this.showTypes.length == 0) {
          this.showTypes[0] = this.initData[0];
        }
        this.showInfo = this.showTypes[0];
        // console.log(this.showTypes)
        this.isShowData = true;
        console.log(this.showInfo);
      } else {
        //对象情况
        this.showTypes = this.initData.infos.CakeType;
        this.showInfo = this.initData.infos;
        this.isShowData = true;
        // console.log( this.showTypes)
        console.log(this.showInfo);
        console.log(this.showTypes);
      }
      this.selSize(this.showTypes[0], 0);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
#show {
  /* 1.轮播图 */
  .banner {
    height: r(445);
    img {
      height: 100%;
    }
  }
  /* 2.商品名称 */
  .content {
    div:nth-last-child(2) {
      line-height: 4.53vw;
      font-weight: bold;
      color: #333;
      font-size: 4.53vw;
      margin-top: 2vw;
      margin-bottom: 4vw;
    }
    .promotion-activity {
      width: 100%;
      height: 8vw;
      margin-bottom: 8vw;
      .promotion-a {
        margin: 0 auto;
        font-size: 4vw;
        line-height: 8vw;
        width: 8vw;
        height: 8vw;
        color: #fff;
        border-radius: 2px;
        background: #f2495e;
      }
    }
  }
  /* 3.商品介绍 */
  .mt4 {
    border-top: 4vw solid #f7f7f7;
  }
  .cake-info-datum-a {
    display: flex;
    margin-bottom: 2.93vw;
    margin-top: 9.066vw;
  }
  .cake-info-datum-list .cake-info-left {
    text-align: left;
    color: #9a9a9a;
    font-size: 3.73vw;
    width: 15.93vw;
    margin-left: 4vw;
  }
  .cake-info-datum-list .cake-info-right {
    text-align: left;
    font-size: 3.73vw;
    width: 72vw;
    margin-left: 4vw;
    margin-right: 4vw;
    color: #252525;
    line-height: 1.6;
  }
  .cake-info-datum-b {
    display: flex;
    margin-bottom: 4vw;
  }
  .cake-info-datum-c {
    display: flex;
    margin-bottom: 4vw;
  }
  .cake-info-datum-d {
    display: flex;
    margin-bottom: 4vw;
  }
  .cake-info-datum-e {
    display: flex;
    margin-bottom: 9.066vw;
  }
  /* 4.商品评价 */
  .p4 {
    padding: 4vw 0;
    display: flex;
  }
  .am-u-sm-6 {
    width: 50%;
  }
  .am-u-sm-6.clplr.evaluate-a {
    padding-left: 4vw;
  }
  .evaluate-a .left {
    float: left;
    font-size: 3.73vw;
    margin-top: 1.2vw;
    margin-right: 2.93vw;
    width: 12%;
  }
  .am-img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
  }
  .evaluate-a .right {
    float: left;
    font-size: 3.73vw;
    line-height: 1.6;
    color: #333;
  }
  .am-u-sm-6.clplr.evaluate-b {
    padding-right: 4vw;
  }
  .evaluate-b .right {
    float: right;
    font-size: 3.73vw;
    margin-top: 1.3vw;
    margin-left: 1.6vw;
    width: 5%;
  }
  .evaluate-b .left {
    float: right;
    font-size: 3.73vw;
    line-height: 1.6;
  }
  .qfc {
    color: #9a9a9a;
  }
  //商品磅数
  .bang {
    margin-bottom: r(33.12);
  }
  .cake-size-a {
    display: flex;
    width: 100%;
    border-top: 8vw solid #fff;
    background: #fff;
    .li-select {
      float: left;
      font-size: 3.73vw;
      text-align: center;
      line-height: 8vw;
      padding: 0 3.5875vw;
      height: 8vw;
      margin-left: 4vw;
      background: #fff;
      border-radius: 2px;
      color: #333;
      border: 1px solid #ddd;
    }
    .li-selected {
      background: #02d3d6;
      border-radius: 2px;
      color: #fff;
      border: 1px solid #02d3d6;
    }
  }

  //底部界面
  .bgw {
    background: white;
  }
  .am-u-sm-12 {
    width: 100%;
  }
  .purchase-c {
    float: left;
    margin-left: 4vw;
    margin-top: 1.4492vw;
    margin-bottom: 2.4vw;
    width: 36vw;
    overflow: hidden;
    .purchase-c-1 {
      line-height: 1.6;
      text-align: left;
      font-size: 4.53vw;
      color: #f2495e;
      font-weight: bolder;
      width: 36vw;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .purchase-c .purchase-c-2 .purchase-c-2-left {
    line-height: 1.6;
    float: left;
    font-size: 2.4vw;
    color: #333;
  }
  .purchase-c .purchase-c-2 .purchase-c-2-right {
    line-height: 1.6;
    float: left;
    font-size: 2.4vw;
    color: #333;
    font-weight: bolder;
  }
  .purchase-a {
    float: right;
    width: 30.667vw;
    text-align: center;
    padding: r(18) 0;
    background: #02d4d7;
    color: white;
    font-weight: bolder;
  }
  .purchase-b {
    float: right;
    width: 29.335vw;
    text-align: center;
    padding: 4.3478vw 0;
  }
  .purchase-1 {
    font-size: r(16);
    line-height: r(25);
  }
  .purchase-2 {
    font-size: r(16);
    line-height: r(25);
  }
  /* 6商品购买数量 */
  .num {
    > span {
      padding-left: r(16.56);
      font: 1.3em sans-serif;
      line-height: r(27);
    }
    > div {
      padding-right: r(16.56);
      > img {
        width: 2.666vw;
      }
      > span {
        display: inline-block;
        font: r(16) / r(25) sans-serif;
        width: r(35);
      }
    }
    justify-content: space-between;
  }
  /* 7.底部注释 */
  //底部注释
  .jg-gonggao {
    background: #f7f7f7;
    float: left;
    display: block;
    margin-bottom: r(55);
    padding: r(35) 0;
  }
  .jg-gonggao1 {
    float: left;
    margin: 0 4vw;
    font-size: 3.734vw;
  }
  .jg-text-z {
    text-align: left;
    float: left;
    width: 27vw;
    color: #181818;
  }
  .jg-text-y {
    line-height: 1.6;
    text-align: left;
    float: left;
    width: 65vw;
    color: #a2a2a2;
  }
}
</style>
